<!-- 柱状图 -->
<template>
	<div>
		<!-- <div class="title"><p>{{title}}</p></div> -->
		<div ref="barchart" :style="{height:height,width:width}"></div>
	</div>
</template>

<script>
import { formatBytes } from "@/utils/index.js";
export default {
  data() {
    return {};
  },
	props: {
		title: {
      type: String,
      default: '显示日统计趋势'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
	watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
		this.myChart = this.$echarts.init(this.$refs.barchart, 'macarons')
    this.setOptions(this.chartData)
  },
	methods: {
		setOptions(chartData){
			let colorList = [
				'#63ace5',
				'#f9dc5c',
				'#b8e994',
				'#ff7272',
				'#ffa931',
				'#85a392',
				'#9174d7',
				'#f78fb3',
				'#cc8e35',
				'#f19066'
			];
			let seriesData = chartData.series.map((item, index) => {
				return {
					value: item,
					itemStyle: {
						color: '#5f91a8'
					}
				};
			});
			this.myChart.setOption({
				xAxis: {
					type: 'value',
				},
				yAxis: {
					type: 'category',
					inverse: true,//倒叙
					data: chartData.xAxis
				},
				tooltip: {
          trigger: "item",
					backgroundColor: '#fff',
					formatter: function name(params) {
            return `${formatBytes(params.value)}/S`
          },
        },
				series: [
					{
						data: seriesData,
						type: 'bar',
						barWidth : 25,
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'right', //在上方显示
									formatter: (params) => {
										return formatBytes(params.value);
									},
									textStyle: { //数值样式
										color: '#5f91a8',
										fontSize: 14
									}
								}
							}
						},
					}
				],
				color: colorList
			})
		}
	}
};
</script>
<style scoped>
</style>